<template>
    <div class="base-wrap">
        <h1>1、Button 按钮</h1>
        <div style="margin-bottom: 10px">
            <cds-button type="primary">主要按钮</cds-button>
            <cds-button type="primary" disabled>主要按钮禁用</cds-button>
        </div>
        <div style="margin-bottom: 10px">
            <cds-button type="default">次要按钮</cds-button>
            <cds-button type="default" disabled>次要按钮禁用</cds-button>
        </div>
        <div style="margin-bottom: 10px">
            <cds-button plain>缺省按钮</cds-button>
            <cds-button plain disabled>缺省按钮禁用</cds-button>
        </div>
        <div style="margin-bottom: 10px">
            <cds-button text>文本按钮</cds-button>
            <cds-button text disabled>文本按钮禁用</cds-button>
        </div>
        <h1>2、Input 输入框</h1>
        <div style="margin-bottom: 10px">
            <cds-input v-model="text1" placeholder="基本输入框" style="width: 300px;margin-right: 10px"></cds-input>
            <cds-input disabled placeholder="基本输入框禁用" style="width: 300px"></cds-input>
        </div>
        <div style="margin-bottom: 10px">
            <cds-input v-model="text2" type="textarea" placeholder="文本域" style="width: 300px;margin-right: 10px"></cds-input>
            <cds-input disabled type="textarea" placeholder="文本域禁用" style="width: 300px"></cds-input>
        </div>
        <h1>3、Select 选择器</h1>
        <div style="margin-bottom: 10px">
            <cds-select v-model="value" :teleported="false" placeholder="Select" style="margin-right: 10px">
                <cds-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                />
            </cds-select>
            <cds-select v-model="value" disabled :teleported="false" placeholder="Select">
            </cds-select>
        </div>
        <h1>4、checkbox</h1>
        <div>
            <cds-checkbox v-model="checkbox" label="Option 2" size="large" />
        </div>
        <h1>5、radioGroup</h1>
        <div>
            <cds-radio-group v-model="radio">
                <el-radio label="1" size="large">Option 1</el-radio>
                <el-radio label="2" size="large">Option 2</el-radio>
            </cds-radio-group>
        </div>
        <h1>6、radio</h1>
        <div>
            <cds-radio v-model="radio">Option A</cds-radio>
        </div>
        <h1>7、tooltip</h1>
        <div>
            <cds-tooltip
                popper-class="tooltip-customized"
                trigger="click"
                class="box-item"
                effect="dark"
                content="Top Left prompts info"
                placement="top-start">
                <el-button>top-start</el-button>
            </cds-tooltip>
        </div>
        <h1>8、breadcrumb</h1>
        <div>
            <cds-breadcrumb separator="/">
                <el-breadcrumb-item>homepage</el-breadcrumb-item>
                <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
            </cds-breadcrumb>
        </div>
        <h1>9、InputNumber</h1>
        <div>
            <cds-input-number
                v-model="numberValue"
                :min="1"
                :max="10"
                label="描述文字"
            ></cds-input-number>
        </div>
        <h1>10、Slider</h1>
        <div>
            <cds-slider v-model="numberValue"></cds-slider>
        </div>
        <h1>11、Tabs</h1>
        <div>
            <cds-tabs v-model="tabModel">
                <cds-tab-pane label="用户管理" name="first">用户管理</cds-tab-pane>
                <cds-tab-pane label="配置管理" name="second">配置管理</cds-tab-pane>
            </cds-tabs>
        </div>
        <h1>12、Dialog</h1>
        <div>
            <cds-button type="text" @click="dialogVisible = true">点击打开 Dialog</cds-button>
            <cds-dialog
                title="提示"
                v-model="dialogVisible"
                width="30%">
                <span>这是一段信息</span>
                <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </template>
            </cds-dialog>
        </div>
        <h1>13、Alert</h1>
        <div>
            <cds-alert title="unclosable alert" type="success" :closable="false" />
        </div>
        <h1>14、Message</h1>
        <div>
            <cds-button :plain="true" @click="openMessage">Show message</cds-button>
        </div>
        <h1>15、MessageBox</h1>
        <div>
            <cds-button text @click="openMessageBox">Click to open the Message Box</cds-button>
        </div>
        <h1>16、Switch 开关</h1>
        <div>
            <cds-switch v-model="switch_value" size="small"></cds-switch>
        </div>
        <h1>17、Dropdown 下拉菜单</h1>
        <div>
            <cds-dropdown>
                <cds-button type="text">Dropdown List</cds-button>
                <template #dropdown>
                    <cds-dropdown-menu>
                        <cds-dropdown-item>Action 1</cds-dropdown-item>
                        <cds-dropdown-item>Action 2</cds-dropdown-item>
                        <cds-dropdown-item>Action 3</cds-dropdown-item>
                        <cds-dropdown-item disabled>Action 4</cds-dropdown-item>
                    </cds-dropdown-menu>
                </template>
            </cds-dropdown>
        </div>
        <h1>18、Steps 步骤条</h1>
        <div>
            <cds-steps :active="active_step" style="margin-bottom: 20px">
                <cds-step title="完成" status="success" />
                <cds-step title="进行中" status="process" />
                <cds-step title="等待" status="wait" />
            </cds-steps>
            <cds-steps :active="active_step">
                <cds-step title="完成" status="success" />
                <cds-step title="错误/失败" status="error" />
                <cds-step title="等待" status="wait" />
            </cds-steps>
        </div>
        <h1>19、Table 表格</h1>
        <div>
            <cds-table :data="tableData" style="width: 100%">
                <cds-table-column prop="date" label="Date" width="150" fixed="left"></cds-table-column>
                <cds-table-column prop="name" label="Name" width="120"></cds-table-column>
                <cds-table-column prop="state" label="State" width="120"></cds-table-column>
                <cds-table-column prop="city" label="City" width="120"></cds-table-column>
                <cds-table-column prop="address" label="Address" width="600"></cds-table-column>
                <cds-table-column prop="zip" label="Zip" width="120"></cds-table-column>
                <cds-table-column fixed="right" label="Operations" width="120">
                    <template #default>
                        <cds-button type="text">Edit</cds-button>
                    </template>
                </cds-table-column>
            </cds-table>
        </div>
        <h1>20、Pagination 分页</h1>
        <div>
            <cds-pagination
                    v-model:current-page="currentPage1"
                    v-model:page-size="pageSize"
                    :page-sizes="[100, 200, 300, 400]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
        <h1>21、Transfer 穿梭框</h1>
        <div>
            <cds-transfer
                    v-model="transfer_value"
                    filterable
                    filter-placeholder="请输入关键字搜索"
                    :data="transferData"
            />
        </div>
        <h1>22、Cascader 级联选择器</h1>
        <div>
            <cds-cascader v-model="cascader_value" :options="cascaderOptions" />
        </div>
        <h1>23、DatePicker 日期选择器</h1>
        <div style="margin-bottom: 20px">
            <cds-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择某一天"
                    style="margin-right: 24px"
            />
            <cds-date-picker
                    v-model="value2"
                    type="date"
                    placeholder="选择某一天(带快捷选项)"
                    :disabled-date="disabledDate"
                    :shortcuts="shortcuts"
            />
        </div>
        <div>
            <cds-date-picker
                    v-model="value3"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="margin-right: 24px"
            />
            <cds-date-picker
                    v-model="value4"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :disabled-date="disabledDate"
                    :shortcuts="shortcuts1"
            />
        </div>
        <h1>24、DateTimePicker 日期时间选择器</h1>
        <div style="margin-bottom: 20px">
            <cds-date-picker
                    v-model="value5"
                    type="datetime"
                    placeholder="选择日期和时间点"
                    style="margin-right: 24px"
            />
            <cds-date-picker
                    v-model="value6"
                    type="datetime"
                    placeholder="选择日期和时间点(带快捷选项)"
                    :disabled-date="disabledDate"
                    :shortcuts="shortcuts"
            />
        </div>
        <div>
            <cds-date-picker
                    v-model="value7"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="margin-right: 24px"
            />
            <el-date-picker
                    v-model="value8"
                    type="datetimerange"
                    :shortcuts="shortcuts1"
                    :disabled-date="disabledDate"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
            />
        </div>
        <h1>25、Collapse 折叠面板</h1>
        <div>
            <cds-collapse v-model="activeNames">
                <cds-collapse-item title="Consistency" name="1">
                    <div>
                        Consistent with real life: in line with the process and logic of real
                        life, and comply with languages and habits that the users are used to;
                    </div>
                    <div>
                        Consistent within interface: all elements should be consistent, such
                        as: design style, icons and texts, position of elements, etc.
                    </div>
                </cds-collapse-item>
                <cds-collapse-item title="Feedback" name="2">
                    <div>
                        Operation feedback: enable the users to clearly perceive their
                        operations by style updates and interactive effects;
                    </div>
                    <div>
                        Visual feedback: reflect current state by updating or rearranging
                        elements of the page.
                    </div>
                </cds-collapse-item>
                <cds-collapse-item title="Efficiency" name="3">
                    <div>
                        Simplify the process: keep operating process simple and intuitive;
                    </div>
                    <div>
                        Definite and clear: enunciate your intentions clearly so that the
                        users can quickly understand and make decisions;
                    </div>
                    <div>
                        Easy to identify: the interface should be straightforward, which helps
                        the users to identify and frees them from memorizing and recalling.
                    </div>
                </cds-collapse-item>
                <cds-collapse-item title="Controllability" name="4">
                    <div>
                        Decision making: giving advices about operations is acceptable, but do
                        not make decisions for the users;
                    </div>
                    <div>
                        Controlled consequences: users should be granted the freedom to
                        operate, including canceling, aborting or terminating current
                        operation.
                    </div>
                </cds-collapse-item>
            </cds-collapse>
        </div>
    </div>
</template>
<script setup>
import { CdsMessage, CdsMessageBox } from 'cds-ui-base-components'
import { ref } from 'vue'

let radio = ref('1')
let checkbox = ref(true)
let text1 = ref('');
let text2 = ref('');

let value = ref('');
let options = ref([
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
        disabled: true,
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]);

let numberValue = ref(8);
let tabModel = ref('first')
let dialogVisible = ref(false)

const openMessage = () => {
    CdsMessage('this is a message.')
}
const openMessageBox = () => {
    CdsMessageBox.confirm(
        'proxy will permanently delete the file. Continue?',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    ).then(() => {
        CdsMessage({
            type: 'success',
            message: 'Delete completed',
        })
    }).catch(() => {
        CdsMessage({
            type: 'info',
            message: 'Delete canceled',
        })
    })
}

let switch_value = ref(false);
let active_step = ref(1);
let tableData = ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
]);
let currentPage1 = ref(1);
let pageSize = ref(100);

let transfer_value = ref([]);
let transferData = ref([
    {
        key: 0,
        label: 'California'
    },
    {
        key: 1,
        label: 'Illinois'
    },
    {
        key: 2,
        label: 'Maryland',
        disabled: true
    },
    {
        key: 3,
        label: 'Texas'
    },
    {
        key: 4,
        label: 'Florida'
    },
    {
        key: 5,
        label: 'Colorado'
    }
]);
let cascader_value = ref([]);
let cascaderOptions = ref([
    {
        value: 'guide',
        label: 'Guide',
        disabled: true,
        children: [
            {
                value: 'disciplines',
                label: 'Disciplines',
                children: [
                    {
                        value: 'consistency',
                        label: 'Consistency',
                    },
                    {
                        value: 'feedback',
                        label: 'Feedback',
                    },
                    {
                        value: 'efficiency',
                        label: 'Efficiency',
                    },
                    {
                        value: 'controllability',
                        label: 'Controllability',
                    },
                ],
            },
            {
                value: 'navigation',
                label: 'Navigation',
                children: [
                    {
                        value: 'side nav',
                        label: 'Side Navigation',
                    },
                    {
                        value: 'top nav',
                        label: 'Top Navigation',
                    },
                ],
            },
        ],
    },
    {
        value: 'component',
        label: 'Component',
        children: [
            {
                value: 'basic',
                label: 'Basic',
                disabled: true,
                children: [
                    {
                        value: 'layout',
                        label: 'Layout',
                    },
                    {
                        value: 'color',
                        label: 'Color',
                    },
                    {
                        value: 'typography',
                        label: 'Typography',
                    },
                    {
                        value: 'icon',
                        label: 'Icon',
                    },
                    {
                        value: 'button',
                        label: 'Button',
                    },
                ],
            },
            {
                value: 'form',
                label: 'Form',
                children: [
                    {
                        value: 'radio',
                        label: 'Radio',
                    },
                    {
                        value: 'checkbox',
                        label: 'Checkbox',
                    },
                    {
                        value: 'input',
                        label: 'Input',
                    },
                    {
                        value: 'input-number',
                        label: 'InputNumber',
                    },
                    {
                        value: 'select',
                        label: 'Select',
                    },
                    {
                        value: 'cascader',
                        label: 'Cascader',
                    },
                    {
                        value: 'switch',
                        label: 'Switch',
                    },
                    {
                        value: 'slider',
                        label: 'Slider',
                    },
                    {
                        value: 'time-picker',
                        label: 'TimePicker',
                    },
                    {
                        value: 'date-picker',
                        label: 'DatePicker',
                    },
                    {
                        value: 'datetime-picker',
                        label: 'DateTimePicker',
                    },
                    {
                        value: 'upload',
                        label: 'Upload',
                    },
                    {
                        value: 'rate',
                        label: 'Rate',
                    },
                    {
                        value: 'form',
                        label: 'Form',
                    },
                ],
            },
            {
                value: 'data',
                label: 'Data',
                children: [
                    {
                        value: 'table',
                        label: 'Table',
                    },
                    {
                        value: 'tag',
                        label: 'Tag',
                    },
                    {
                        value: 'progress',
                        label: 'Progress',
                    },
                    {
                        value: 'tree',
                        label: 'Tree',
                    },
                    {
                        value: 'pagination',
                        label: 'Pagination',
                    },
                    {
                        value: 'badge',
                        label: 'Badge',
                    },
                ],
            },
            {
                value: 'notice',
                label: 'Notice',
                children: [
                    {
                        value: 'alert',
                        label: 'Alert',
                    },
                    {
                        value: 'loading',
                        label: 'Loading',
                    },
                    {
                        value: 'message',
                        label: 'Message',
                    },
                    {
                        value: 'message-box',
                        label: 'MessageBox',
                    },
                    {
                        value: 'notification',
                        label: 'Notification',
                    },
                ],
            },
            {
                value: 'navigation',
                label: 'Navigation',
                children: [
                    {
                        value: 'menu',
                        label: 'Menu',
                    },
                    {
                        value: 'tabs',
                        label: 'Tabs',
                    },
                    {
                        value: 'breadcrumb',
                        label: 'Breadcrumb',
                    },
                    {
                        value: 'dropdown',
                        label: 'Dropdown',
                    },
                    {
                        value: 'steps',
                        label: 'Steps',
                    },
                ],
            },
            {
                value: 'others',
                label: 'Others',
                children: [
                    {
                        value: 'dialog',
                        label: 'Dialog',
                    },
                    {
                        value: 'tooltip',
                        label: 'Tooltip',
                    },
                    {
                        value: 'popover',
                        label: 'Popover',
                    },
                    {
                        value: 'card',
                        label: 'Card',
                    },
                    {
                        value: 'carousel',
                        label: 'Carousel',
                    },
                    {
                        value: 'collapse',
                        label: 'Collapse',
                    },
                ],
            },
        ],
    },
    {
        value: 'resource',
        label: 'Resource',
        children: [
            {
                value: 'axure',
                label: 'Axure Components',
                disabled: true,
            },
            {
                value: 'sketch',
                label: 'Sketch Templates',
            },
            {
                value: 'docs',
                label: 'Design Documentation',
            },
        ],
    },
]);

let value1 = ref('');
let value2 = ref('');
let value3 = ref([]);
let value4 = ref([]);

let value5 = ref('');
let value6 = ref('');
let value7 = ref([]);
let value8 = ref([]);

let activeNames = ref(['1'])

const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}

const disabledDate = (time) => {
    return time.getTime() > Date.now()
}

const shortcuts = [
    {
        text: 'Today',
        value: new Date(),
    },
    {
        text: 'Yesterday',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: 'A week ago',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
];

const shortcuts1 = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
];
</script>
<script>
    export default {
        name: "test,vue"
    }
</script>
<style scoped lang="scss">
.base-wrap {
    text-align: left;
}
</style>

